import { Todo } from "@/types";
import TodoItem from "./TodoItem";

interface TodoListProps {
    todos: Array<Todo>;
    deleteTodo: (id: number) => void;
    toggleTodo: (id: number) => void;
}
function TodoList ({todos, deleteTodo, toggleTodo}: TodoListProps) {
    return (
        <ul className="w-full space-y-3 mb-6">
            {todos.length === 0 ? (
                <p className="text-purple-300/90 text-center py-4">暂无任务</p>
            ) : (
                todos.map(todo => (
                    <TodoItem key={todo.id} todo={todo} deleteTodo={deleteTodo} toggleTodo={toggleTodo}></TodoItem>
                ))
            )}
        </ul>
    )
}
export default TodoList;